<h3>flat tree</h3>
<cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <!-- 叶子节点 -->
  <cdk-tree-node *cdkTreeNodeDef="let node; when: !hasChild" cdkTreeNodePadding
                 [style.display]="shouldRender(node) ? 'flex' : 'none'"
                 class="example-tree-node">
    <!-- use a disabled button to provide padding for tree leaf -->
    <!-- <button disabled></button> -->
    {{node.name}}
  </cdk-tree-node>
  <!-- This is the tree node template for expandable nodes -->
  <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
                 [style.display]="shouldRender(node) ? 'flex' : 'none'"
                 class="example-tree-node">
    <button cdkTreeNodeToggle
            [attr.aria-label]="'Toggle ' + node.name"
            (click)="node.isExpanded = !node.isExpanded"
            [style.visibility]="node.expandable ? 'visible' : 'hidden'">
      <div class="expand-icon-rtl-mirror">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </div>
    </button>
    {{node.name}}
  </cdk-tree-node>
</cdk-tree>

<h3>nested tree</h3>
<button (click)="collapseAll()">collapse all</button>
<button (click)="expandAll()">expand all</button>

<cdk-tree #nestedTree="cdkTree" [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl">
  <!-- This is the tree node template for leaf nodes -->
  <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="example-tree-node">
    <!-- use a disabled button to provide padding for tree leaf -->
    <!-- <button mat-icon-button disabled></button> -->
    {{node.name}}
  </cdk-nested-tree-node>
  <!-- This is the tree node template for expandable nodes -->
  <cdk-nested-tree-node *cdkTreeNodeDef="let node; when: nestedHasChild" class="example-tree-node">
    <button [attr.aria-label]="'Toggle ' + node.name" cdkTreeNodeToggle>
      <div class="expand-icon-rtl-mirror">
        {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </div>
    </button>
    {{node.name}}
    <button (click)="insertNode(node)">insert one child</button>
    <div [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)">
      <ng-container cdkTreeNodeOutlet></ng-container>
    </div>
  </cdk-nested-tree-node>
</cdk-tree>